import { Card, Button, Checkbox, Form, Input, message } from 'antd';
import "./index.scss"
import { useStore } from '@/store'
import { useNavigate } from 'react-router-dom';

function Login() {
    const { LoginStore } = useStore()
    const navigate=useNavigate()

    const onFinish = async values => {
        if (!values.remember) return message.error('请先阅读协议并勾选');
        try {
            await LoginStore.setToken({
                mobile: values.username,
                code: values.password
            })
            navigate('/',{replace:true})
            message.success(`用户${values.username},登录成功`);
        } catch (e) {
            message.error(e.response?.data?.message || '登录失败')
        }
    };


    return (
        <div className="Login">
            <Card className="Login-Card">

                <Form
                    validateTrigger={['onBlur', 'onChange']}
                    name="basic"
                    initialValues={{
                        remember: true,
                    }}
                    onFinish={onFinish}
                >
                    <Form.Item
                        name="username"
                        rules={[
                            {
                                required: true,
                                message: '请输入手机号!',
                            },
                            {
                                pattern: /^1[3-9]\d{9}$/,
                                message: '请输入正确的手机号',
                                validateTrigger: 'onBlur'
                            }
                        ]}
                    >
                        <Input />
                    </Form.Item>

                    <Form.Item
                        name="password"
                        rules={[
                            {
                                required: true,
                                message: '请输入密码!',
                            },
                            {
                                len: 6,
                                message: '请输入6位密码',
                                validateTrigger: 'onBlur'
                            }
                        ]}
                    >
                        <Input.Password />
                    </Form.Item>

                    <Form.Item
                        name="remember"
                        valuePropName="checked"
                        wrapperCol={{
                            offset: 8,
                            span: 16,
                        }}
                    >
                        <Checkbox>是否同意!</Checkbox>
                    </Form.Item>

                    <Form.Item
                        wrapperCol={{
                            offset: 8,
                            span: 16,
                        }}
                    >
                        <Button type="primary" htmlType="submit" block style={{ width: '200px' }}>
                            登录
                        </Button>
                    </Form.Item>
                </Form>

            </Card>
        </div>
    )
}

export default Login